/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/12/11
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Menu, Icon, Popover, Dropdown, Layout } from 'antd';
import classNames from 'classnames';
import styles from './Header.less';
import Menus from './Menu';

const AntdHeader = Layout.Header;

const SubMenu = Menu.SubMenu;

class Header extends React.Component {

  render () {
    const {
      user,
      organizations,
      collapsed,
      logout,
      isMobile,
      handleVisibleChange,
      mobilePopoverVisible,
      navOpenKeys,
      location,
      menu,
      toggleSider,
      changeOrganization,
    } = this.props;

    const menusProps = {
      menu,
      collapsed,
      darkTheme: false,
      handleClickMenuItem: handleVisibleChange,
      location,
      navOpenKeys,
    };
    const clickChooseOrganization = e => changeOrganization(e.key);

    const organizationMenu = (
      <Menu onClick={clickChooseOrganization}>
        <Menu.Item key="0">
          社团一
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="1">
          社团二
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="3">
          社团三
        </Menu.Item>
      </Menu>
    );

    return (
      <AntdHeader style={{ background: '#fff', padding: 0 }}>
        <div className={styles.header}>
          <div className={styles.leftWrapper}>
            {isMobile
              ? <Popover
                placement="bottomLeft"
                onVisibleChange={handleVisibleChange}
                visible={mobilePopoverVisible}
                overlayClassName={styles.popovermenu}
                trigger="click"
                content={<Menus {...menusProps} />}>
                <div className={styles.button}>
                  <Icon type="bars" />
                </div>
              </Popover>
              : <div
                className={styles.button}
                onClick={toggleSider}
              >
                <Icon type={classNames({ 'menu-unfold': collapsed, 'menu-fold': !collapsed })} />
              </div>}
            <div className={styles.appChildTitle}>
              <Dropdown overlay={organizationMenu} trigger={['click']}>
                <span style={{ cursor: 'pointer' }}>
                  计科系学生会 <Icon type="swap" />
                </span>
              </Dropdown>

              <span className={styles.attention}>成都东软学院</span>
            </div>
          </div>

          <div className={styles.rightWrapper}>
            <div className={styles.button}>
              <Icon type="mail" />
            </div>
            <div className={styles.button} onClick={logout}>
              <Icon type="logout" />
            </div>
          </div>

        </div>
      </AntdHeader>
    );
  }
}

// const Header = ({ user, logout, switchSide, sideFold, isNavBar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys, menu }) => {
//   let handleClickMenu = e => e.key === 'logout' && logout();
//   const menusProps = {
//     menu,
//     sideFold: false,
//     darkTheme: false,
//     isNavBar,
//     handleClickNavMenu: switchMenuPopover,
//     location,
//     navOpenKeys,
//     changeOpenKeys,
//   };
//   return (
//     <div >
//       <Affix offsetTop={0.1}>
//         <div className={styles.header}>
//
//           <div className={styles.leftWrapper}>
//             {isNavBar
//               ? <Popover placement="bottomLeft" onVisibleChange={switchMenuPopover} visible={menuPopoverVisible} overlayClassName={styles.popovermenu} trigger="click" content={<Menus {...menusProps} />}>
//                 <div className={styles.button}>
//                   <Icon type="bars" />
//                 </div>
//               </Popover>
//               : <div
//                 className={styles.button}
//                 onClick={switchSide}
//               >
//                 <Icon type={classNames({ 'menu-unfold': sideFold, 'menu-fold': !sideFold })} />
//               </div>}
//             <div className={styles.appChildTitle}>
//               计科系学生会
//               <span className={styles.attention}>成都东软学院</span>
//             </div>
//           </div>
//
//           <div className={styles.rightWrapper}>
//             <div className={styles.button}>
//               <Icon type="mail" />
//             </div>
//             <Menu mode="horizontal" onClick={handleClickMenu}>
//               <SubMenu
//                 style={{
//                   float: 'right',
//                 }}
//                 title={<span>
//                 <Icon type="user" />
//                   {user.username}
//               </span>}
//               >
//                 <Menu.Item key="logout">
//                   注销
//                 </Menu.Item>
//               </SubMenu>
//             </Menu>
//           </div>
//         </div>
//       </Affix>
//     </div>
//   );
// };
//
// Header.propTypes = {
//   menu: PropTypes.array,
//   user: PropTypes.object,
//   logout: PropTypes.func,
//   switchSide: PropTypes.func,
//   sideFold: PropTypes.bool,
//   isNavBar: PropTypes.bool,
//   menuPopoverVisible: PropTypes.bool,
//   location: PropTypes.object,
//   switchMenuPopover: PropTypes.func,
//   navOpenKeys: PropTypes.array,
//   changeOpenKeys: PropTypes.func,
// };

export default Header;
